import { useGetAllArticles } from '@/services/article';
import { useGetAllAttention } from '@/services/attention';
import {
  TagsOutlined,
  FieldTimeOutlined,
  EyeOutlined,
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from '@ant-design/icons';
import { ProList } from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { Avatar, Space, Tabs, Tag } from 'antd';
import React, { useMemo } from 'react';
import { IconText } from '../my-articles';
import { CoverImg, OverflowHiddenText } from '../my-articles/style';

interface ArticleListProps {
  aid: number;
}

const ArticleList: React.FC<ArticleListProps> = ({ aid }) => {
  const { data: source } = useGetAllArticles(aid);
  const dataSource = useMemo(() => {
    return source?.data.map((item) => ({
      ...item,
      title: <OverflowHiddenText row={1}>{item.title}</OverflowHiddenText>,
    }));
  }, [source]);
  return (
    <ProList<any>
      onRow={(record: any) => {
        return {
          onClick: () => history.push(`/article?id=${record.id}`),
        };
      }}
      itemLayout="vertical"
      rowKey="id"
      headerTitle="最近更新"
      dataSource={dataSource}
      metas={{
        title: {},
        subTitle: {},
        description: {
          render: (_, record) => (
            <Space>
              <TagsOutlined />
              {record.tags &&
                record.tags.split('/').map((tag: string, i: number) => (
                  <Tag color="#5BD8A6" key={i}>
                    {tag}
                  </Tag>
                ))}
            </Space>
          ),
        },
        extra: {
          render: (_: any, record: { avatar: string | undefined }) => () => {
            return record.avatar ? (
              <CoverImg src={record.avatar ?? ''}></CoverImg>
            ) : (
              ''
            );
          },
        },
        content: {
          render: (_, record) => {
            return (
              <OverflowHiddenText>{record.introduction}</OverflowHiddenText>
            );
          },
        },
        actions: {
          render: (_, record) => [
            <IconText icon={FieldTimeOutlined} text={record.time} key="time" />,
            <span style={{ width: 20 }} key="space"></span>,
            <IconText
              icon={EyeOutlined}
              text={record.lookNum ?? 0}
              key="list-vertical-eye"
            />,
            <IconText
              icon={StarOutlined}
              text={record.starNum ?? 0}
              key="list-vertical-star"
            />,
            <IconText
              icon={LikeOutlined}
              text={record.likeNum ?? 0}
              key="list-vertical-like"
            />,
            <IconText
              icon={MessageOutlined}
              text={record.commentNum ?? 0}
              key="list-vertical-message"
            />,
          ],
        },
      }}
    />
  );
};

const Attention: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { data: attentionRes } = useGetAllAttention(initialState?.id ?? -1);

  return (
    <>
      <Tabs
        defaultActiveKey="1"
        tabPosition="left"
        items={attentionRes?.data.map((item: API.IUserInfo) => {
          return {
            label: (
              <Space direction="vertical">
                <Avatar size={70} src={item.avatar}></Avatar>
                {item.nickName}
              </Space>
            ),
            key: item.id + '',
            disabled: item.id === 28,
            children: <ArticleList aid={item.id ?? -1}></ArticleList>,
          };
        })}
      />
    </>
  );
};

export default Attention;
